<template>
	<view>
		<view class="con">
			<view class="title">兑换方式</view>
			<view class="contentType">
				<u-row>
					<u-col :span="4" v-for="(item,index) in payType" :key="index">
						<view @click="getTabs(index)" :class="active==(index+1)?'active list':'list'">
							<image :src="'../static/rx'+index+'.png'"></image>
							<view class="name">
								{{item}}
							</view>
							<view class="triangle" v-if="active==index+1"></view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="title">兑换数量</view>
			<view class="box">
				<view class="input">
					<input type="number" v-model="value" @input="getNumber" />
					<image src="../static/jingyan5.png" class="unit"></image>
				</view>
				<view class="rmb"> 需支付 <text> {{number}}</text> {{active==1?'金蜜':'蜜贝'}}</view>
			</view>
			<view class="box3">*蜜贝兑换金蜜券比例为<text>{{needguomi}}:1</text>,金蜜兑换金蜜券比例为<text>{{needjindou}}:1</text></view>
			<view class="sub_button" @click="checkSafePasswordEmpty">确认兑换</view>
		</view>
		<u-keyboard mode="number" :dot-enabled="false" v-model="pay" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center">
					<view class="u-text-name">
						二级密码
					</view>
					<view class="u-text-text">
						您当前正在进行交易，为确保账户安全请输入二级 密码验证身份
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips"></view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				show: false,
				value: 0,
				img_url: '../static/exchange_tb2.png',
				info: {
					top_uid: ""
				},
				pay: false,
				password: "",
				number: 0,
				discount: [],
				payType: ['金蜜', '蜜贝'],
				active: 1,
				jindoujuan: "",
				needguomi: "",
				needjindou: ""
			}
		},
		onLoad(option) {
			than = this;
			than.post("api/Goldbean/gdbTicketNumber", null, function(data) {
				than.jindoujuan = data.jindoujuan;
				than.needguomi = data.needguomi;
				than.needjindou = data.needjindou;
			})
		},
		methods: {
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			getTabs(index) {
				than.active = index + 1
				than.value = 0;
				than.number = 0;
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					than.$u.throttle(than.sub);
				}
			},
			checkSafePasswordEmpty() {
				than.post("api/member/checkSafePasswordEmpty", null, function(data) {
					if (parseInt(data) == 0) {
						than.toast("未设置二级密码")
						uni.navigateTo({
							url: "/pages/htmlA/setting/twopassword"
						})
					} else {
						than.pay = true;
					}
				})
			},
			sub() {
				var exhcange_type = than.active == 1 ? 2 : 1
				than.post("api/Goldbean/applyExchangeGdbTicket", {
					exhcange_number: than.value,
					exhcange_type: exhcange_type,
					password: than.password
				}, function(data) {
					than.toast(data);
					setTimeout(function() {
						uni.navigateBack()
					}, 1500);
				})
			},
			getNumber(e) {
				var x = parseInt(e.detail.value);
				if (than.active == 1) {
					than.number = than.mul(x, than.needjindou)
				} else {
					than.number = than.mul(x, than.needguomi)
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background: white;
	}

	.contentType {
		padding: 24rpx 0 63rpx;

		.u-col-4 {
			padding: 0 !important;
			margin-right: 20rpx;
		}

		.active {
			border: 1rpx solid #FFC31E !important;
		}

		.list {
			text-align: center;
			background: #F8F8F8;
			height: 263rpx;
			border-radius: 20rpx;
			position: relative;
			border: 1rpx solid #FFFFFF;

			.triangle {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 0 24rpx 24rpx;
				border-color: transparent transparent #FEC31D transparent;
			}

			image {
				margin-top: 38rpx;
				width: 125rpx;
				height: 125rpx;
			}

			.name {
				line-height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}

	.content {
		border-radius: 20rpx;
		margin-top: 28rpx;

		.up {
			height: 54rpx;
			background: #FEC31D;
			display: flex;
			align-items: center;
			border-radius: 20rpx 20rpx 0px 0px;

			.list {
				width: 50%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				padding-left: 30rpx;
			}
		}

		.down {
			background: #F7F6F4;
			display: flex;
			align-items: center;
			height: 64rpx;
			border-bottom: 2rpx solid #FFFFFF;

			.list {
				width: 50%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #F46813;
				padding-left: 30rpx;
			}

			.l {
				border-right: 2rpx solid #FFFFFF;
			}
		}
	}

	.con {
		padding: 40rpx 36rpx 36rpx 36rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}

		.box {
			height: 220rpx;
			padding: 23rpx;
			background: #F4F4F7;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.head {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 15rpx;
			}

			.input {
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #FFFFFF;
				padding: 16rpx 0rpx;

				input {
					font-size: 60rpx;
					font-weight: bold;
					height: 80rpx;
					font-family: myFirstFont;
				}

				.unit {
					width: 58rpx;
					height: 37rpx;
					margin-left: auto;
				}
			}

			.rmb {
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
				padding: 20rpx 0rpx;

				text {
					margin: 0 10rpx;
					color: #F46813;
					height: 86rpx;
				}
			}

			.button {
				display: flex;
				align-items: center;
				width: 314rpx;
				height: 105rpx;
				background: #FEC31D;
				box-shadow: 0px 3px 16px 4px rgba(148, 146, 146, 0.12);
				border-radius: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin: auto;
				justify-content: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
					margin-top: 7rpx;
				}
			}
		}

		.box2 {
			padding: 37rpx 24rpx;
			background-color: #F4F4F7;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			image {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.con1 {
				flex: 1;

				.item1 {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.item2 {
					font-size: 40rpx;
					font-weight: bold;
					color: #F46813;
					font-style: italic;
					font-family: myFirstFont;
					margin-top: 10rpx;
				}
			}
		}

		.box3 {
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
			padding: 40rpx 0rpx;

			text {
				color: #F46813;
			}
		}

		.sub_button {
			width: 474rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #333333;
			box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(170, 170, 170, 0.16);
			border-radius: 40rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin: auto;
		}

		.box4 {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			line-height: 36rpx;
			margin-top: 60rpx;
		}
	}
</style>
